<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <!-- layui-->
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <script src="../../lib/layui/layui.all.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
    <!--<script type="text/javascript" src="lib/jquery-3.3.1.min.js"></script>-->
    <!-- 搜索-->
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.14&key=4fc888714b81ff1b83524573927518ac&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.MouseTool,AMap.Autocomplete,AMap.PolyEditor"></script>
    <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>

    <style>
        #container {
            margin-top: 130px;
            width: 100%;
            height: 100%;
        }

        label {
            width: 55px;
            height: 26px;
            line-height: 26px;
            margin-bottom: 0;
        }

        button.btn {
            width: 80px;
        }
    </style>
</head>
<body>
<div class="layui-form-item" style="width: 300px;margin-top: 20px;margin-left: 140px ">
    <label class="layui-form-label">名称 :</label>
    <div class="layui-input-block" style="margin-left: 100px">
        <input name="title" class="layui-input" type="text" placeholder="请输入名称" autocomplete="off"
               value="蓝" lay-verify="title">
    </div>
</div>
<!--选择颜色-->
<div class="layui-input-block">
    <div style="margin-left: 30px;">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">颜色值 :</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input class="layui-input" id="test-form-input" type="text" placeholder="请选择颜色" value="#1c97f5"
                           style="width: 200px">
                    <i id="text"></i>
                </div>
                <div class="layui-inline" style="left: -11px;">
                    <div id="test-form" style="width: 50px;height: 50px"></div>
                </div>
            </div>
        </form>
    </div>
</div>
<div id="container" class="map"></div>
<div class="input-card" style="width:28rem;">
    <div class="input-item">
        <input id="tipinput" style="width: 300px" value="" placeholder="输入关键字搜索">
    </div>
    <div class="input-item">
        <input type="button" class="button" value="绘制范围" onClick="editor.startDrawPolygon()"
               style="margin-right:2rem;"/>
        <input type="button" class="button" value="编辑范围" onClick="editor.startEditPolygon()"
               style="margin-right:2rem;"/>
        <input type="button" class="button" value="范围编辑完成" onClick="editor.closeEditPolygon()"/>
    </div>
    <div class="input-item">
        <button class="btn" id="remove-circle" style="margin-left:5rem;">关闭</button>
        <button class="btn" id="add-circle" style="margin-left:2rem;">添加</button>
    </div>
</div>
<!--颜色选择-->
<script>
    layui.use('layer', function () {
        var layer = layui.layer //弹层
        layui.use('colorpicker', function () {
            var $ = layui.$
                , colorpicker = layui.colorpicker;
            //开启全功能
            colorpicker.render({
                elem: '#test-form'
                , color: '#1c97f5'
                , predefine: true
                , alpha: true
                , done: function (color) {
                    $('#test-form-input').val(color);
                    layer.tips('给指定隐藏域设置了颜色值：' + color, this.elem);
                    color || this.change(color); //清空时执行 change
                }
            });
        })
    });
</script>
//地图功能
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        center: [104.044257, 30.550355],//地图中心点
        zoom: 10 //地图显示的缩放级别
    });
    // 默认一个点标记在地图中心点
    var marker = new AMap.Marker({
        position: map.getCenter(),
        offset: new AMap.Pixel(-10, -20),
        // 设置是否可拖拽
        draggable: false,
        cursor: 'move'
    });
    marker.setMap(map);
    // 设置点标记的动画效果，此处为弹跳效果
    marker.setAnimation('AMAP_ANIMATION_BOUNCE');
    //关键字搜索
    var autoOptions = {
        input: "tipinput"
    };
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
        map: map
    });  //构造地点查询类
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);  //关键字查询查询
    }

    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        if (e.poi && e.poi.location) {
            map.setZoom(15);
            map.setCenter(e.poi.location);
        }
    }

    //绘制覆盖物
    var mouseTool = new AMap.MouseTool(map);
    //监听draw事件可获取画好的覆盖物
    var overlays = [];
    mouseTool.on('draw', function (e) {
        overlays.push(e.obj);
    });
    var editor = {};
    map.setFitView();
    //绘制多边形
    var mouseTool = new AMap.MouseTool(map);
    editor.startDrawPolygon = function () {
        var my_color = $('#test-form-input').val()

        /* mouseTool.polygon({
             fillColor: my_color,
             strokeColor: '#ff3b36',
             fillOpacity: 0.4,
             strokeWeight: 6,
             strokeOpacity: 0.2,
             zIndex: 50,
             //同Polygon的Option设置
         });*/
        function drawPolygon() {
            mouseTool.polygon({
                strokeColor: "#FF33FF",
                strokeOpacity: 1,
                strokeWeight: 6,
                strokeOpacity: 0.2,
                fillColor: my_color,
                fillOpacity: 0.4,
                // 线样式还支持 'dashed'
                strokeStyle: "solid",
                // strokeStyle是dashed时有效
                // strokeDasharray: [30,10],
            })
        }

        drawPolygon();
    }

    //编辑多边形
    var points = [];
    var my_point = [];
    editor.startEditPolygon = function () {
        //注意通过map.getAllOverlays("polygon")对象获得的是一个数组，故取数组第一个对象
        var allOverlays = map.getAllOverlays('polygon');
        for (var i = 0; i < allOverlays.length; i++) {
            my_point = allOverlays[i]
            editor._polygonEditor = new AMap.PolyEditor(map, allOverlays[i]);
        }
        editor._polygonEditor.open();
    }
    editor.closeEditPolygon = function () {
        editor._polygonEditor.close();
        points = my_point.getPath();
    }
    var point = [];
    AMap.event.addListener(mouseTool, 'draw', function (e) { //添加事件
        point = e.obj.getPath();//获取路径/范围
    });

    function getPoint() {
        var tmp = [];
        for (var i = 0; i < overlays.length; i++) {
            var overlay = overlays[i].getPath();
            for (var j = 0; j < overlay.length; j++) {
                var grid = overlay[j];
                tmp[j] = (grid.lng + "," + grid.lat)
            }
        }
        return tmp;
    }

    //编辑范围完成
    document.getElementById('remove-circle').onclick = function () {
        mouseTool.close();//关闭绘图工具
    }

</script>
<!--&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
<script>

    /* &#45;----------&#4*/
    $(function () {
        //添加
        $("#add-circle").on("click", function () {
            $(function () {
                $.ajax({
                    url: "/mc",
                    traditional: true,
                    data: {
                        "colorname": $("[name=title]").val(),
                        "loglat": points,
                        "colorvalues": $('#test-form-input').val()
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data.status === "true") {

                        } else {

                        }
                    }
                })
            })
        })
    })
</script>
</body>
</html>